<template>
  <div class="user-account-management">
    <!-- 用户列表表格 -->
    <el-table :data="userList" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="username" label="用户名" width="150" />
      <el-table-column prop="phone" label="手机号" width="150" />
      <el-table-column prop="idCard" label="身份证号" width="200" />
      <el-table-column prop="address" label="收货地址" width="250" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" link @click.stop="openDetailDialog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog v-model="dialogVisible" title="用户详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户名">{{ currentUser?.username }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ currentUser?.phone }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ currentUser?.idCard }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{ currentUser?.address }}</el-descriptions-item>
        <el-descriptions-item label="用户头像">
          <el-image style="width: 100px; height: 100px" :src="currentUser?.avatarUrl"
            :preview-src-list="[currentUser?.avatarUrl || '']" fit="cover" />
        </el-descriptions-item>
        <el-descriptions-item label="用户账号">{{ currentUser?.account }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{ currentUser?.password }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentUser?.gender }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-popconfirm title="确定要注销该用户账号吗？" @confirm="handleDelete">
            <template #reference>
              <el-button type="danger">注销账号</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus' // 引入 ElMessage

// 用户数据接口
interface User {
  id: number
  username: string
  phone: string
  idCard: string
  address: string
  avatarUrl: string
  account: string
  password: string
  gender: string
}

// 模拟用户数据
const userList = ref<User[]>([
  {
    id: 1,
    username: '张三',
    phone: '13800138000',
    idCard: '123456789012345678',
    address: '北京市朝阳区XX路XX号',
    avatarUrl: 'https://example.com/avatar1.jpg',
    account: 'zhangsan',
    password: '123456',
    gender: '男'
  },
  {
    id: 2,
    username: '李四',
    phone: '13900139000',
    idCard: '234567890123456789',
    address: '上海市浦东新区XX路XX号',
    avatarUrl: 'https://example.com/avatar2.jpg',
    account: 'lisi',
    password: '654321',
    gender: '女'
  }
])

// 当前选中的用户
const currentUser = ref<User | null>(null)

// 控制详情对话框的显示
const dialogVisible = ref(false)

// 打开详情对话框
const openDetailDialog = (row: User) => {
  currentUser.value = row
  dialogVisible.value = true
}

// 处理注销账号
const handleDelete = () => {
  if (currentUser.value) {
    // 这里可以添加实际的注销账号逻辑，比如调用 API
    userList.value = userList.value.filter(user => user.id !== currentUser.value.id)
    dialogVisible.value = false
    ElMessage.success('用户账号注销成功')
  }
}

// 点击表格行事件
const handleRowClick = (row: User) => {
  openDetailDialog(row)
}
</script>

<style scoped>
.user-account-management {
  padding: 20px;
}
</style>